<template>
	<div style="display: flex;flex-direction: column;"
		class="otherPage sustainableDevelopment environmentalInformation">
		<Header :selected="6"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover;':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :bgColor="bgColor" :checked="2">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :gutter="6">
					<el-col :span="24" class="newArea" v-for="(item, index) in data" :key="index">
						<div class="news-list">
							<el-row :gutter="0" :key="index" class="news-item"
								:class="{ 'hover': hoverIndex === index }" @mouseover="hoverIndex = index"
								@mouseleave="hoverIndex = -1">
								<el-col :xs="5" :sm="3" :md="3" :lg="3">
									<div class="date">
										<div class="day"> {{item.issueTime? formatDate(item.issueTime, 'DD'):'' }}
										</div>
										<div class="month-year">
											{{ item.issueTime? formatDate(item.issueTime, 'yyyy-MM'):'' }}
										</div>
									</div>
								</el-col>
								<el-col :xs="15" :sm="18" :md="18" :lg="18" class="newcontent">
									<div class="newcontentcontainer">
										<div class="title" @click="goToDetail(item.id)">{{ item.title||'' }}</div>
										<p v-html="item.content" class="description"> </p>

									</div>
								</el-col>
								<el-col :xs="4" :sm="3" :md="3" :lg="3" class="newcontentMoreArea">
									<div class="moreInfoBtn" @click="goToDetail(item.id)">{{$t("more")}} <i
											class="el-icon-d-arrow-right"></i></div>
								</el-col>
							</el-row>
						</div>
					</el-col>
				</el-row>

				<el-row :gutter="24" type="flex" class="paginationArea">
					<el-pagination background :current-page.sync="currentPage" :page-size="pageSize"
						:layout="isShowJumper?'prev, pager, next,total,jumper ':'prev, next,total' "  :total="total"
						:prev-text="$t('previousPage')" :next-text="$t('nextPage')"
						@current-change="handleCurrentChange" />
				</el-row>



			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../../src/components/common/header/Header.vue'
	import Navigation from '../../../src/components/common/navigation/Navigation.vue'
	import Footer from '../../../src/components/common/footer/Footer.vue'
	import Pagination from '../../../src/components/common/Pagination.vue'
	import {
		fmtDate
	} from '../../utils/tools'
	import {
		csustainableDevelopmentMenu
	} from '../../utils/menu.js'
	import {
		getStore,
		setStore
	} from '../../utils/tools.js';
	export default {
		components: {
			Header,
			Navigation,
			Footer,
			Pagination,
			fmtDate
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				pageSize: 10,
				total: 0,
				currentPage: 1,
				menus: csustainableDevelopmentMenu,
				breadcrumbItems: [{
						//首页
						label: this.$t('home'),
						to: '/home'
					},
					{
						//企业新闻
						label: this.$t('sustainableDevelopment'),
						to: '/sustainableDevelopment'
					},
					{
						//企业动态
						label: this.$t('environmentalInformation'),
						to: '/environmentalInformation'
					}
				],
				newsCarousel: [],

				data: [],
				hoverIndex: -1,
				isShowJumper: true,
				environmentalLeft: 3,
				environmentalRight: 21
			};
		},
		computed: {},
		created() {
			if (window.innerWidth < 768) {
				this.isShowJumper = false;
			} else {
				this.isShowJumper = true;
			}
			this.environmentalLeft = window.innerWidth < 768 ? 5 : 3;
			this.environmentalRight = window.innerWidth < 768 ? 19 : 21;
			this.bindEnvironmentalInfoPage();
			window.addEventListener('resize', this.handleWindowResize);
		},
		destroyed() {
			window.removeEventListener('resize', this.handleWindowResize);
		},
		mounted() {

			this.bindBg();
		},
		methods: {
			handleWindowResize() {
				if (window.innerWidth < 768) {
					this.environmentalLeft = 5;
					this.environmentalRight = 19;
					this.isShowJumper = false;
				} else {
					this.environmentalLeft = 3;
					this.environmentalRight = 21;
					this.isShowJumper = true;
				}
			},
			formatDate(date, format) {
				if(date){
					date=date.substr(0,10);
				}
				debugger
				const dateObj = new Date(date);
				const year = dateObj.getFullYear();
				const month = String(dateObj.getMonth() + 1).padStart(2, '0');
				const day = String(dateObj.getDate()).padStart(2, '0');

				// 根据传入的格式进行处理
				if (format === 'yyyy-MM') {
					return `${year}-${month}`;
				} else if (format === 'DD') {
					return day;
				}
				return date;
			},
			/**
			 * (1)	获取环保信息列表
			 *http://123.132.237.18:17394/openApi/develop/getEnvironmentalInfoPage
			 */
			bindEnvironmentalInfoPage() {
				let environmentPage = parseInt(getStore("environmentPage"));
				this.currentPage = environmentPage > 0 ? environmentPage : this.currentPage;
				let params = {
					"pageNum": this.currentPage,
					"pageSize": this.pageSize
				};
				let that = this;
				that.$request.getEnvironmentalInfoPage(params).then(res => {
					this.data = res.data.records
					this.total = res.data.total;
					// this.currentPage = res.data.pageNum;
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)(1)	获取绿色发展顶部背景-待完善，接口未提供
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getEnvironmentalInfoTopImage(params).then(res => {
					this.bg_img = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			///////////////获取新闻动态数据
			getNewsTrendData() {
				// // 请求表格数据
				// let params = {
				// 	'pageNum': this.currentPage,
				// 	'pageSize': this.pageSize,
				// }
				// this.$request.getNewsTrendList(params).then(res => {
				// 	// 把请求到的数据给testDatas数组
				// 	this.newsList = res.data.rows;
				// 	// 分页总数
				// 	this.total = res.data.total;

				// }).catch((error) => {
				// 	console.log(error)
				// })
			},

			///////获取点击页码，请求接口
			handleCurrentChange(currentPage) {
				// console.log(currentPage, 'currentPage');
				this.currentPage = currentPage;
				setStore("environmentPage", this.currentPage);
				this.bindEnvironmentalInfoPage();
			},
			//////跳转详情页面
			goToDetail(id) {
				this.$router.push({
					name: this.$t("environmentalInformationInfo"),
					query: {
						id: id
					}
				});
			},

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/sustainableDevelopment/sustainableDevelopment.css");

	.environmentalInformation .newArea {
		height: auto;
	}

	.environmentalInformation .paginationArea {
		height: 70px;
		line-height: 70px;
		justify-content: center;
		padding-top: 20px;
	}

	.environmentalInformation .moreInfoBtn {
		width: 100%;
		height: 14vh;
		line-height: 14vh;
		align-items: center;
		text-align: center;
		color: #0484D7;
		font-size: 16px;
		padding: 0px;
	}

	.environmentalInformation .moreInfoBtn:hover {
		color: #0396f0;
	}

	/* 列表样式 */
	.environmentalInformation .news-list .news-item {
		height: 146px;
		margin-top: 1vh;

		padding-top: 15px !important;
		/* 	margin-bottom: 1vh ; */
		border-bottom: 1px solid #E8E6E5;
	}

	.environmentalInformation .news-list .date {
		border-bottom: 2px solid #E8E6E5;
		height: 12vh;
		background: #EDEDED;

		width: 80%;
	}

	.environmentalInformation .news-list .title {
		font-size: 24px;
		font-weight: 530;
		color: #333333;
		height: 6vh;
		line-height: 6vh;
		padding: 0px;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.environmentalInformation .news-list .number-of-views {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
		height: 5vh;
		line-height: 5vh;
		align-items: center;
	}

	.environmentalInformation .news-list .description {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
		height: 6vh;
		line-height: 3vh;
		padding: 0px;
		text-align: left;
		overflow: hidden;
	}

	.environmentalInformation .news-list .day {
		text-align: center;
		font-size: 2em;
		height: 7vh;
		line-height: 7vh;
		font-weight: 400;
		color: #0484D7;
		/* padding-left: 15px; */
	}

	.environmentalInformation .dateText {
		height: 4vh;
		line-height: 4vh;
		align-items: center;
		text-align: left;
		color: #777777;
		font-size: 1.2em;
		/* padding-left: 15px; */
		opacity: 0.8;
	}

	.environmentalInformation .news-list .month-year {
		text-align: center;
		font-size: 1.2em;
		/* padding-left: 15px; */
		opacity: 0.8;
		color: #777777;
	}

	.environmentalInformation .btn-next span {
		min-width: 50px !important;
	}

	.el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px !important;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.news-item {
		margin-bottom: 20px;
		cursor: pointer;
		overflow: hidden;
		transition: transform 0.3s ease;
		/* 添加过渡效果 */
	}

	.environmentalInformation .news-item:hover {
		transform: scale(0.98)
	}

	.environmentalInformation .news-item:hover .title {
		color: #0484D7;
	}

	.environmentalInformation .news-item:hover .date {
		background-color: #0484D7;
	}

	.environmentalInformation .news-item:hover .day,
	.environmentalInformation .news-item:hover .month-year,
	.environmentalInformation .news-item:hover .dateText {
		color: #FFF;
		opacity: 1;
	}

	.environmentalInformation .news-list .newcontent {}

	.environmentalInformation .news-list .newcontent .newcontentcontainer {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
	}

	::v-deep .el-pagination span:not([class*=suffix]) {
		display: inline-block;
		font-size: 13px;
		min-width: 50px;
		height: 28px;
		line-height: 28px;
		vertical-align: top;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}



	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	.environmentalInformation .news-list .news-item:first {
		margin-top: 0px !important;


	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(2560/1920*116));
		}

		.environmentalInformation .newArea {
			height: calc(1px*(2560/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(2560/1920*146));
			height: calc(1px*(2560/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(2560/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(2560/1920*116));
			line-height: calc(1px*(2560/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2560/1920*65));
			line-height: calc(1px*(2560/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(2560/1920*65));
			line-height: calc(1px*(2560/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(2560/1920*51));
			line-height: calc(1px*(2560/1920*51/2));
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(2560/1920*116));
		}

		.environmentalInformation .newArea {
			height: calc(1px*(2560/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(2560/1920*146));
			height: calc(1px*(2560/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(2560/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(2560/1920*116));
			line-height: calc(1px*(2560/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2560/1920*65));
			line-height: calc(1px*(2560/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(2560/1920*65));
			line-height: calc(1px*(2560/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(2560/1920*51));
			line-height: calc(1px*(2560/1920*51/2));
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(2320/1920*116));
		}

		.environmentalInformation .newArea {
			height: calc(1px*(2320/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(2320/1920*146));
			height: calc(1px*(2320/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(2320/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(2320/1920*116));
			line-height: calc(1px*(2320/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2320/1920*65));
			line-height: calc(1px*(2320/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(2320/1920*65));
			line-height: calc(1px*(2320/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(2320/1920*51));
			line-height: calc(1px*(2320/1920*51/2));
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(2120/1920*116));
		}

		.environmentalInformation .newArea {
			height: calc(1px*(2120/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(2120/1920*146));
			height: calc(1px*(2120/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(2120/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(2120/1920*116));
			line-height: calc(1px*(2120/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(2120/1920*65));
			line-height: calc(1px*(2120/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(2120/1920*65));
			line-height: calc(1px*(2120/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(2120/1920*51));
			line-height: calc(1px*(2120/1920*51/2));
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: 116px;
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: 65px;
			line-height: 65px;
		}

		.environmentalInformation .news-list .title {
			height: 65px;
			line-height: 65px;
		}

		.environmentalInformation .news-list .description {
			height: 51px;
			line-height: 51px/2;
		}

		.environmentalInformation .newArea {
			height: 146px;
		}

		.environmentalInformation .news-list .news-item {
			height: 146px;
		}

		.environmentalInformation .news-list .newcontent {
			height: 116px;
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: 116px;
			line-height: 116px;
		}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(1720/1920*116));
		}

		.environmentalInformation .newArea {
			height: calc(1px*(1720/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(1720/1920*146));
			height: calc(1px*(1720/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(1720/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(1720/1920*116));
			line-height: calc(1px*(1720/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(1720/1920*65));
			line-height: calc(1px*(1720/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(1720/1920*65));
			line-height: calc(1px*(1720/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(1720/1920*51));
			line-height: calc(1px*(1720/1920*51/2));
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(1520/1920*116));
		}


		.environmentalInformation .newArea {
			height: calc(1px*(1520/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(1520/1920*146));
			height: calc(1px*(1520/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(1520/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(1520/1920*116));
			line-height: calc(1px*(1520/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(1520/1920*65));
			line-height: calc(1px*(1520/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(1520/1920*65));
			line-height: calc(1px*(1520/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(1520/1920*51));
			line-height: calc(1px*(1520/1920*51/2));
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.environmentalInformation .news-list .date {
			height: calc(1px*(1366/1920*116));
		}

		.environmentalInformation .newArea {
			height: calc(1px*(1366/1920*146));
		}

		.environmentalInformation .news-list .news-item {
			height: calc(1px*(1366/1920*146));
			height: calc(1px*(1366/1920*146));

		}

		.environmentalInformation .news-list .newcontent {
			height: calc(1px*(1366/1920*116));
		}

		.environmentalInformation .news-list .newcontent .newcontentcontainer {
			height: 100%;
		}

		.environmentalInformation .moreInfoBtn {
			height: calc(1px*(1366/1920*116));
			line-height: calc(1px*(1366/1920*116));
		}

		.environmentalInformation .news-list .day {
			padding-top: 0px;
			height: calc(1px*(1366/1920*65));
			line-height: calc(1px*(1366/1920*65));
		}

		.environmentalInformation .news-list .title {
			height: calc(1px*(1366/1920*65));
			line-height: calc(1px*(1366/1920*65));
		}

		.environmentalInformation .news-list .description {
			height: calc(1px*(1366/1920*51));
			line-height: calc(1px*(1366/1920*51/2));
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {
		.environmentalInformation .news-list .title {
			height: 30px;
			line-height: 30px;
		}

		.environmentalInformation .news-list .description {
			height: 50px;
			line-height: 28px;
		}

		.environmentalInformation .news-list .day {
			height: 50px;
			line-height: 60px;
			font-size: 30px;
		}

	}

	@media (max-width:768px) {
		.environmentalInformation .content,
		.environmentalInformation .content_bg {
			padding: 5px;
		}

		.environmentalInformation .news-list .newcontent {
			padding: 0px 5px;

		}

		.environmentalInformation .news-list .title {
			font-size: 16px;
			padding: 0px;
		}

		.environmentalInformation .news-list .description {
			font-size: 12px;
			text-align: left;
		}

		.environmentalInformation .moreInfoBtn {
			font-size: 12px;
		}

		.environmentalInformation .news-list .month-year {
			font-size: 12px;
		}
	}

	@media (max-width:440px) {
		.environmentalInformation .news-list .title {
			color: #0484D7;
			text-align: left;
		}

		.environmentalInformation .news-list .date {
			width: 100%;
			background-color: #0484D7;
		}

		.environmentalInformation .news-list .month-year {
			color: #FFF;
			opacity: 1;
		}

		.environmentalInformation .news-list .day {
			color: #FFF;

		}
	}
</style>
